<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>H5上传</title>
    <style>
    #drag {
        position: relative;
        width: 400px;
        height: 200px;
        margin-left: 35%;
        border: 1px dashed red;
        line-height: 200px;
        color: red;
        font-size: 34px;
        text-align: center;
        margin: 100px auto 0;
        display: none;
        z-index: 1000;
        background-color: #f5f5f5;
    }
    
    #mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 100;
        display: none;
    }
    
    .btnPos {
        position: absolute;
        top: 320px;
        left: 50%;
        margin-left: -20px;
    }
    
    .tabPos {
        position: absolute;
        top: 360px;
    }
    </style>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>

<body class="">
    <div id="drag">拖拽到此区域上传</div>
    <center>
        <div class="btnPos">
            <button id="upload" class="btn btn-center mt">极速上传</button>
        </div>
    </center>
    <table class="table tabPos">
        <tr>
            <th class="text-center">文件名称</th>
            <th class="text-center">文件类型</th>
            <th class="text-center">文件大小</th>
        </tr>
        <tr class="text-center">
            <td class="fileName"> </td>
            <td class="fileType"> </td>
            <td class="fileSize"> </td>
        </tr>
    </table>
    <div class="progress progPos">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        </div>
    </div>
    <div id="mask"></div>
    <script>
    var oDrag = document.getElementById('drag');
    var oMask = document.getElementById('mask');
    oMask.ondragenter = document.ondragenter = function(e) {
        oDrag.style.display = 'block';
        oMask.style.display = 'block';
        e.preventDefault();
    };
    oMask.ondragleave = function(e) {
        oDrag.style.display = 'none';
        oMask.style.display = 'none';
        e.preventDefault();
        oDrag.ondragenter = function(e) {
            oMask.style.display = 'none';
            oDrag.style.display = 'block';
            e.preventDefault();
            e.stopPropagation();
        };
    };
    oDrag.ondragover = function(e) { //拖拽悬停
        e.preventDefault();
    };
    var fileName = document.querySelector('.fileName');
    var fileType = document.querySelector('.fileType');
    var fileSize = document.querySelector('.fileSize');
    var process = document.querySelector('.progress-bar');
    oDrag.ondrop = function(e) {
        file = e.dataTransfer.files[0];
        e.preventDefault();
        fileName.innerHTML = file.name;
        fileType.innerHTML = file.type;
        fileSize.innerHTML = formatSize(file.size);
    }

    function formatSize(val) {
        if (val > 1024 * 1024 * 1024) {
            return (val / 1024 / 1024 / 1024).toFixed(2) + 'G';
        }
        if (val > 1024 * 1024) {
            return (val / 1024 / 1024).toFixed(2) + 'MB';
        }
        if (val > 1024) {
            return (val / 1024).toFixed(2) + 'kb';
        }
        return val + 'b';
    }
    var oUpload = document.getElementById('upload');
    var file = '';
    oUpload.onclick = function() {
        var xml = new XMLHttpRequest();
        xml.open('POST', '/upload', true);
        xml.upload.onprogress = function(e) {
            process.style.width = e.loaded / e.total * 100 + '%';
        }
        xml.onload = function() {
            alert(xml.responseText);
        };
        var fd = new FormData;
        fd.append('content', file)
        xml.send(fd);
    }
    </script>
</body>

</html>
